from otree.api import *

doc = """
决策方式操纵检验
"""


class C(BaseConstants):
    NAME_IN_URL = 'chk'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1
    TABLE_STYLE = """
<style>
img {
  width: auto;
  height: 300px;
}
  /* 设置整个表格的样式 */
  table {
    width: 100%; /* 表格宽度 */
    border-collapse: collapse; /* 合并边框 */
    margin: 50px 0; /* 外边距 */
    font-size: 0.9em; /* 字体大小 */
    font-family: sans-serif; /* 字体 */
    min-width: 400px; /* 最小宽度 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* 阴影效果 */
  }

  /* 设置表头的样式 */
  th {
    background-color: #4286f4; /* 背景颜色 */
    color: white; /* 文字颜色 */
    text-align: left; /* 文字对齐 */
    padding: 12px 15px; /* 内边距 */
  }

  /* 设置表格标题的样式 */
  caption {
    padding: 10px; /* 内边距 */
    caption-side: bottom; /* 标题位置 */
    color: #888; /* 文字颜色 */
    font-size: 1em; /* 字体大小 */
    margin-top: 12px; /* 上边距 */
  }

  /* 设置单元格的样式 */
  td {
    background-color: #f7f7f7; /* 背景颜色 */
    color: #333; /* 文字颜色 */
    text-align: left; /* 文字对齐 */
    padding: 12px 15px; /* 内边距 */
  }

  /* 设置奇数行的背景颜色 */
  tr:nth-child(even) {
    background-color: #e7e7e7;
  }

  /* 设置鼠标悬停时的行样式 */
  tr:hover {
    background-color: #f1f1f1;
  }

  /* 设置表格边框 */
  th, td {
    border: 1px solid #ddd; /* 边框颜色 */
  }
</style>
    """


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    advice = models.IntegerField(choices=[[1, '是'], [0, '否']], widget=widgets.RadioSelect,
                                 label="您是否参考了专家意见来做出决策?")
    help = models.IntegerField(choices=[[1, '非常有帮助'],
                                        [2, '有些帮助'],
                                        [3, '没有帮助'],
                                        [4, '有些干扰'],
                                        [5, '非常干扰']], widget=widgets.RadioSelect,
                               label="专家意见对您的决策有多大帮助?")


class Check(Page):
    form_model = 'player'
    form_fields = ['advice', 'help']


page_sequence = [
    Check,
]
